<!-- 在这个文件对每个tab对应的列表进行渲染 -->
<template>
	<view class="parent">
		<!-- 如果当前页已经加载过数据或者当前切换到的tab是当前页，才展示当前页数据（懒加载） -->
		<z-paging ref="paging" v-model="dataList" @query="queryList" use-page-scroll :scrollable="false" :hide-empty-view="hideEmptyView"
			:refresher-enabled="false" @contentHeightChanged="contentHeightChanged" :auto="false" :auto-clean-list-when-reload="false">
			<view class="tab1" v-for="(item, index) in dataList" :key="index" @click="itemClick(item)" v-if="tabIndex==0">
				<image class="avatar" :src="item.headPicUrl" mode="aspectFill"></image>
				<view class="item-content">
					<view class="content-top">
						<view class="title">{{item.nick}}</view>
						<image class="icon" mode="heightFix" v-if="0==item.realAuth.realAuthStatus && 2==item.sex" :src="getImageUrl('ic_zhenren_gril.png')"></image>
						<image class="icon" mode="heightFix" v-if="0==item.realAuth.realAuthStatus && 1==item.sex" :src="getImageUrl('ic_zhenren_boy.png')"></image>
						<image class="icon" mode="heightFix" v-if="0==item.onlineStatus" :src="getImageUrl('ic_online.png')"></image>
						<image class="icon" mode="heightFix" v-if="1==item.vip" :src="getImageUrl('home_vip.png')"></image>
					</view>
					<view class="sub-title">{{getInfo(item)}}</view>
					<view class="three">{{item.sign}}</view>
				</view>
				<image :src="getImageUrl('home_dazhaohu4.png')" style="width: 80rpx;" mode="widthFix" @click.stop="toChat(item)"></image>
			</view>
			
			<view class="tab2">
				<view class="item-container"  v-for="(item, index) in dataList" :key="index" @click="itemClick(item)" v-if="tabIndex==1">
					<image :src="item.headPicUrl" model="aspectFill"></image>
					<view style="display: flex; flex-direction: row; align-items: center; margin: 0 10rpx;">
						<view style="flex:1;">
							<view class="nick">
								<view class="nick-title">{{item.nick}}</view>
								<!-- v-if="3==item.realNameAuth.realAuthStatus && 1==item.sex" -->
								<image v-if="0==item.realNameAuth.realAuthStatus && 2==item.sex" mode="heightFix" style="height: 30rpx; margin-left: 10rpx;" :src="getImageUrl('ic_zhenren_gril.png')"></image>
								<image v-if="0==item.realNameAuth.realAuthStatus && 1==item.sex" mode="heightFix" style="height: 30rpx; margin-left: 10rpx;" :src="getImageUrl('ic_zhenren_boy.png')"></image>
								<image v-if="0==item.onlineStatus" mode="heightFix" style="height: 30rpx; margin-left: 10rpx;" :src="getImageUrl('ic_online.png')"></image>
							</view>
							<view class="info">{{getInfo2(item)}}</view>
						</view>
						<view class="chat">
							<image :src="getImageUrl('home_dazhaohu2.png')" style="width: 50rpx; height: 50rpx; margin-right: 10rpx;" model="heightFix" @click.stop="toChat(item)"></image>
						</view>
					</view>
					
					<view class="address" v-if="showAddress(item)">
						<image :src="getImageUrl('ic_map_white.png')" style="width: 22rpx;" mode="widthFix"></image>
						<view>{{item.areaStr}}</view>
					</view>
					<view class="sex">
						<view class="sex-girl" v-if="2==item.sex">
							<image :src="getImageUrl('ic_sex_girl_white.png')" style="width: 22rpx;" mode="widthFix"></image>
							<view>{{item.age}}</view>
						</view>
						<view class="sex-boy" v-if="1==item.sex">
							<image :src="getImageUrl('ic_sex_boy_white.png')" style="width: 22rpx;" mode="widthFix"></image>
							<view>{{item.age}}</view>
						</view>
					</view>
					
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import { TUIConversationService} from "@tencentcloud/chat-uikit-engine";
	import constant from '@/common/constant.js'
import IMUtil from "../../common/IMUtil";
	export default {
		data() {
			return {
				dataList: [],
				height: 0,
				hideEmptyView: true,
				completeFunc: null
			}
		},
		onShow() {
			uni.$on('requestHome',function(data){
				console.log('监听到事件来自 update ，携带参数 msg 为：');
			})
		},
		props: {
			//当前组件的index，也就是当前组件是swiper中的第几个
			tabIndex: {
				type: Number,
				default: function(){
					return 0
				}
			},
			//当前swiper切换到第几个index
			currentIndex: {
				type: Number,
				default: function(){
					return 0
				}
			}
		},
		watch: {
			currentIndex: {
				handler(newVal) {
					if (newVal === this.tabIndex) {
						//懒加载，当滑动到当前的item时，才去加载
						this.$nextTick(() => {
							setTimeout(() => {
								this.$refs.paging.reload();
							}, 100);
						})
					}
				},
				immediate: true
			}
		},
		watch: {
			currentIndex: {
				handler(newVal) {
					if (newVal === this.tabIndex) {
						//懒加载，当滑动到当前的item时，才去加载
						this.$nextTick(() => {
							setTimeout(() => {
								this.$refs.paging.reload();
							}, 100);
						})
					}
				},
				immediate: true
			}
		},
		methods: {
			//页面通知当前子组件刷新列表
			reload(completeFunc) {
				//先把父组件下拉刷新的回调函数存起来
				this.completeFunc = completeFunc;
				//调用z-paging的reload方法
				this.$refs.paging.reload();
			},
			//当列表高度改变时，通知页面的swiper同步更改高度
			contentHeightChanged(height){
				const finalHeight = this.dataList.length ? height : 0;
				//限制内容最小高度为屏幕可见高度减z-tabs高度。注意，页面中有使用slot="top"插入的view，则此处的minHeight还应该减去slot="top"插入的view的高度
				const minHeight = uni.getSystemInfoSync().windowHeight - uni.upx2px(80);
				this.$emit('heightChanged',Math.max(finalHeight, minHeight));
			},
			//页面通知当前子组件加载更多数据
			doLoadMore(){
				this.$refs.paging.doLoadMore();
			},
			//页面通知当前子组件清除数据
			clear(){
				this.$refs.paging.clear();
				this.hideEmptyView = true;
			},
			async queryList(pageNo, pageSize) {
				uni.$once('requestHome', data => {
					this.queryList(1, 20);
				})
				const params = {
					pageno: pageNo,
					type: this.tabIndex + 1
				}
				let res = await this.$common.get("/api/user/getUserPage", params);
				if(200 == res.code){
					this.$refs.paging.complete(res.data);
					this.hideEmptyView = false;
					//请求结束，调用父组件的下拉刷新结束回调函数，使得父组件中的z-paging下拉刷新结束
					if (this.completeFunc) {
						this.completeFunc();
					}
				}else{
					this.$refs.paging.complete(false);
					//请求结束，调用父组件的下拉刷新结束回调函数，使得父组件中的z-paging下拉刷新结束
					if (this.completeFunc) {
						this.completeFunc();
					}
				}
			},
			getInfo(item){
				let info = item.age + "岁";
				if(item.heightStr){
					info += " | "+item.heightStr;
				}
				if(item.weightStr){
					info += " | "+item.weightStr;
				}
				if(item.careerStr){
					info += " | "+item.careerStr;
				}
				if(item.areaStr){
					info += " | "+item.areaStr;
				}
				return info;
			},
			getInfo2(item){
				let info = item.age + "岁";
				if(item.heightStr){
					info += " | "+item.heightStr;
				}
				if(item.weightStr){
					info += " | "+item.weightStr;
				}
				return info;
			},
			showAddress(item){
				if(item.areaStr){
					return true;
				}else{
					return false;
				}
			},
			
			itemClick(item) {
				uni.navigateTo({
					url:'/main/user/info/info?txCode='+ item.txCode
				});
			},
			toChat(item){
				IMUtil.toChat(item.txCode)
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 注意:父节点需要固定高度，z-paging的height:100%才会生效 */
	.parent {
		height: 100%;
		
		.tab1{
			display: flex;
			flex-direction: row;
			align-items: center;
			background-color: white;
			border-radius: 10rpx;
			margin-bottom: 1rpx;
			padding: 30rpx;
			width: 750rpx;
			box-sizing: border-box;
			.avatar{
				width: 150rpx;
				height: 150rpx;
				border-radius: 20rpx;
			}
			.item-content{
				display: flex;
				flex-direction: column;
				margin: 0rpx 20rpx;
				width: 450rpx;
				.content-top{
					display: flex;
					flex-direction: row;
					align-items: center;
					.title{
						font-size: 32rpx;
						color: #222;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.icon{
						height: 25rpx; 
						margin-left: 10rpx;
					}
				}
				.sub-title{
					font-size: 24rpx;
					color: #777;
					margin-top: 10rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.three{
					font-size: 26rpx;
					color: #555;
					margin-top: 10rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	
		.tab2{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			width: 100%;
			margin: 0 10rpx;
			.item-container{
				position: relative;
				display: flex;
				flex-direction: column;
				width: 345rpx;
				box-sizing: border-box;
				background-color: #fff;
				border-radius: 10rpx;
				margin: 10rpx;
				
				image{
					width: 100%;
					height: 438rpx;
					border-radius: 10rpx;
				}
				.nick{
					margin: 15rpx 15rpx 0 15rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					.nick-title{
						font-size: 28rpx;
						color: #222;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
				.info{
					margin: 15rpx;
					font-size: 22rpx;
					color: #555;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.address{
					position: absolute;
					top: 10rpx;
					left: 10rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					font-size: 20rpx;
					color: #fff;
				}
				.sex{
					position: absolute;
					top: 10rpx;
					right: 10rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					font-size: 15rpx;
					color: #fff;
					.sex-girl {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						background-color: #fa6adc;
						border-radius: 100rpx;
						padding: 2rpx 8rpx;
					}
					.sex-boy {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						background-color: #007AFF;
						border-radius: 100rpx;
						padding: 2rpx 8rpx;
					}
					.chat{
						position: absolute;
						bottom: 0;
						right: 0;
					}
				}
			}
		}
	}
	
</style>
